$(function (){

    // 判断购物车是否有数据
    if (localStorage.getItem('goods')) {
        // 本地存储中的数据
        var goodsArr = JSON.parse( localStorage.getItem('goods') )
        // 获取数据并渲染
        $.ajax({
            url: './data/goods.json',
            type: 'get',
            dataType: 'json',
            success: function (data){
                // console.log( data )//所有数据
                // 遍历所有数据
                $.each(data,function (index,item){
                    $.each(goodsArr,function (ind,obj){
                        if (item.id === obj.id) {
                            var goodsDom = `
                            <li>
                                <input type="checkbox">
                                <img src="${item.imgurl}" alt="">
                                <h3>${item.title}</h3>
                                <span class="price">${item.price}</span>
                                <span class="num">${obj.num}</span>
                                <span class="del" data-id="${obj.id}">删除</span>
                            </li>
                            `
                            $('.list').append(goodsDom)
                        }
                    })
                })
            }
        })
        // 删除购物车数据
        $('.list').on('click','.del',function (){
            // 获取要删除商品的id
            var id = $(this).attr('data-id')// 'xxx03'
            // 删除点击元素的父级
            $(this).parent().remove()
            // 遍历数据删除点击的商品数据
            $.each(goodsArr,function (index,item){
                // console.log( item )
                if (item.id === id) {
                    goodsArr.splice(index,1)
                    return false
                }
            })
            if (goodsArr.length > 0) {
                // 更新本地存储数据
                localStorage.setItem('goods',JSON.stringify(goodsArr))
            } else {
                localStorage.removeItem('goods')
                var liDom = '<li class="wu">购物车暂无数据！</li>'
                $('.list').html(liDom)
            }
            

            alert('商品移出购物车成功！')
        })
    } else {
        var liDom = '<li class="wu">购物车暂无数据！</li>'
        $('.list').html(liDom)
    }

})